<template>
  <div>
    <p>
      <a href="http://www.ptbird.cn/vue-draggable-dragging.html">vuedraggable </a>可拖拽组件
    </p>
    <vuedraggable class="wrapper" v-model="list">
      <transition-group>
        <div v-for="item in list" :key="item.order" class="item">
          <p style="text-align: center">{{item.name}}--{{item.order}}</p>
        </div>
      </transition-group>
    </vuedraggable>
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable';

export default {
  name: "TestDraggable",
  components: {vuedraggable},
  data() {
    return {
      list: [
        {
          "name": "vue.draggable",
          "order": 1,
          "fixed": false
        },
        {
          "name": "for",
          "order": 4,
          "fixed": false
        },
        {
          "name": "draggable",
          "order": 2,
          "fixed": false
        },
        {
          "name": "component",
          "order": 3,
          "fixed": false
        },
        {
          "name": "based",
          "order": 6,
          "fixed": false
        },
        {
          "name": "on",
          "order": 7,
          "fixed": false
        },
        {
          "name": "Sortablejs",
          "order": 8,
          "fixed": false
        },
        {
          "name": "vue.js 2.0",
          "order": 5,
          "fixed": false
        }
      ]
    }
  },
  updated() {
    console.log(this.list)
  },

}
</script>

<style scoped>
.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.item{
  width: 300px;
  height: 50px;
  background-color: #42b983;
  color: #ffffff;
}
</style>
